import React, { memo } from 'react';
import { Resizable } from 'react-resizable';

const draggableOpts = { enableUserSelectHack: false };

export default memo((props: any) => {

  const { onResize, width, fontSize, fontWeight, color, backgroundColor, customizeStyleFlag, ...restProps } = props;

  const _style: Record<string, any> = restProps.style || {};

  if (customizeStyleFlag) {
    if (fontSize) _style.fontSize = fontSize;
    if (backgroundColor) _style.backgroundColor = backgroundColor;
    if (fontWeight) _style.fontWeight = fontWeight;
    if (color) _style.color = color;
  }

  if (!width) return <th {...restProps}></th>;

  return (
    <Resizable
      width={width}
      height={0}
      onResize={onResize}
      draggableOpts={draggableOpts}>
      <th {...restProps} style={_style}></th>
    </Resizable>
  );
});